<template>
  <a-spin :spinning="confirmLoading">
    <j-form-container :disabled="formDisabled">
      <a-form :form="form" slot="detail">
        <a-row>
          <a-col :span="24">
            <a-form-item label="关联微信用户id" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input v-decorator="['wxUserinfoId', validatorRules.wxUserinfoId]" placeholder="请输入关联微信用户id"></a-input>
            </a-form-item>
          </a-col>
          <a-col :span="24">
            <a-form-item label="患者姓名" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input v-decorator="['name', validatorRules.name]" placeholder="请输入患者姓名"></a-input>
            </a-form-item>
          </a-col>
          <a-col :span="24">
            <a-form-item label="手机号" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input v-decorator="['mobile']" placeholder="请输入手机号"></a-input>
            </a-form-item>
          </a-col>
          <a-col :span="24">
            <a-form-item label="患者头像" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <j-image-upload isMultiple v-decorator="['headImg', validatorRules.headImg]"></j-image-upload>
            </a-form-item>
          </a-col>
          <a-col :span="24">
            <a-form-item label="患者姓名拼音" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input v-decorator="['pyinShort', validatorRules.pyinShort]" placeholder="请输入患者姓名拼音"></a-input>
            </a-form-item>
          </a-col>
          <a-col :span="24">
            <a-form-item label="患者首字母" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input v-decorator="['firstChar', validatorRules.firstChar]" placeholder="请输入患者首字母"></a-input>
            </a-form-item>
          </a-col>
          <a-col :span="24">
            <a-form-item label="关系 1本人 2子女 3父母 4夫妻" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input-number v-decorator="['relation']" placeholder="请输入关系 1本人 2子女 3父母 4夫妻" style="width: 100%"/>
            </a-form-item>
          </a-col>
          <a-col :span="24">
            <a-form-item label="性别 1男 2女 0未知" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <j-dict-select-tag type="list" v-decorator="['sex', validatorRules.sex]" :trigger-change="true" dictCode="sex" placeholder="请选择性别 1男 2女 0未知"/>
            </a-form-item>
          </a-col>
          <a-col :span="24">
            <a-form-item label="生日" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <j-date placeholder="请选择生日" v-decorator="['birthday']" :trigger-change="true" style="width: 100%"/>
            </a-form-item>
          </a-col>
          <a-col :span="24">
            <a-form-item label="身高" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input-number v-decorator="['height']" placeholder="请输入身高" style="width: 100%"/>
            </a-form-item>
          </a-col>
          <a-col :span="24">
            <a-form-item label="体重" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input-number v-decorator="['weight']" placeholder="请输入体重" style="width: 100%"/>
            </a-form-item>
          </a-col>
          <a-col :span="24">
            <a-form-item label="省份" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <j-area-linkage type="cascader" v-decorator="['provinceId']" placeholder="请输入省市区"/>
            </a-form-item>
          </a-col>
          <a-col :span="24">
            <a-form-item label="城市" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <j-area-linkage type="cascader" v-decorator="['cityId']" placeholder="请输入省市区"/>
            </a-form-item>
          </a-col>
          <a-col :span="24">
            <a-form-item label="过往病史" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input v-decorator="['history']" placeholder="请输入过往病史"></a-input>
            </a-form-item>
          </a-col>
          <a-col :span="24">
            <a-form-item label="过敏史" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input v-decorator="['allergy']" placeholder="请输入过敏史"></a-input>
            </a-form-item>
          </a-col>
          <a-col :span="24">
            <a-form-item label="创建时间" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <j-date placeholder="请选择创建时间" v-decorator="['createTime', validatorRules.createTime]" :trigger-change="true" style="width: 100%"/>
            </a-form-item>
          </a-col>
          <a-col :span="24">
            <a-form-item label="修改时间" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <j-date placeholder="请选择修改时间" v-decorator="['updateTime']" :trigger-change="true" style="width: 100%"/>
            </a-form-item>
          </a-col>
          <a-col v-if="showFlowSubmitButton" :span="24" style="text-align: center">
            <a-button @click="submitForm">提 交</a-button>
          </a-col>
        </a-row>
      </a-form>
    </j-form-container>
  </a-spin>
</template>

<script>

  import { httpAction, getAction } from '@api/manage'
  import pick from 'lodash.pick'
  import { filterObj, validateDuplicateValue } from '@/utils/util'
  import JFormContainer from '@comp/jeecg/JFormContainer'
  import JDate from '@comp/jeecg/JDate'
  import JImageUpload from '@comp/jeecg/JImageUpload'
  import JDictSelectTag from "@comp/dict/JDictSelectTag"
  import JAreaLinkage from '@comp/jeecg/JAreaLinkage'
  import { UI_CACHE_DB_DICT_DATA } from '@/store/mutation-types'
  import { JeecgListMixin } from '@/mixins/JeecgListMixin'
  import DictItemModal from '@views/system/modules/DictItemModal'

  export default {
    name: 'WxUserinfoForm',
    components: {
      JFormContainer,
      JDate,
      JImageUpload,
      JDictSelectTag,
      JAreaLinkage,
    },


    props: {
      //流程表单data
      formData: {
        type: Object,
        default: ()=>{},
        required: false
      },
      //表单模式：true流程表单 false普通表单
      formBpm: {
        type: Boolean,
        default: false,
        required: false
      },
      // 表单禁用
      disabled: {
        type: Boolean,
        default: false,
        required: false
      }
    },
    data () {
      return {
        form: this.$form.createForm(this),
        model: {},
        columns: [
          {
            title: '患者id',
            align: "center",
            dataIndex: ' ',
          },
          {
            title: '患者姓名',
            align: "center",
            dataIndex: ' ',
          },
          {
            title: '该患者与用户关系',
            align: "center",
            dataIndex: ' ',
          },
          {
            title: '问诊单数量',
            align: "center",
            dataIndex: ' ',
          },

          {
            title: '操作',
            dataIndex: 'action',
            align: "center",
            scopedSlots: {customRender: 'action'},
          }
        ],
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
        },
        confirmLoading: false,
        validatorRules: {
        wxAccountId: {
        rules: [
            { required: true, message: '请输入微信公众号id!'},
        ]
        },
        openid: {
        rules: [
            { required: true, message: '请输入openid!'},
        ]
        },
        sex: {
        rules: [
            { required: true, message: '请输入性别 1男2女!'},
        ]
        },
        subscribe: {
        rules: [
            { required: true, message: '请输入是否关注公众号!'},
        ]
        },
        createTime: {
        rules: [
            { required: true, message: '请输入创建时间!'},
        ]
        },
},
        url: {
          add: "/wuser/wxUserinfo/add",
          edit: "/wuser/wxUserinfo/edit",
          queryById: "/wuser/wxUserinfo/queryById"
        }
      }
    },
    computed: {
      formDisabled(){
        if(this.formBpm===true){
          if(this.formData.disabled===false){
            return false
          }
          return true
        }
        return this.disabled
      },
      showFlowSubmitButton(){
        if(this.formBpm===true){
          if(this.formData.disabled===false){
            return true
          }
        }
        return false
      }
    },
    methods: {
      add () {
        this.edit({});
      },
      edit (record) {
        this.form.resetFields();
        this.model = Object.assign({}, record);
        this.visible = true;
        this.$nextTick(() => {
          this.form.setFieldsValue(pick(this.model,'wxAccountId','openid','unionid','nickname','sex','city','country','province','language','headimgurl','subscribeTime','subscribeScene','qrScene','qrSceneStr','subscribe','createTime','updateTime'))
        })
      },
      //渲染流程表单数据
      showFlowData(){
        if(this.formBpm === true){
          let params = {id:this.formData.dataId};
          getAction(this.url.queryById,params).then((res)=>{
            if(res.success){
              this.edit (res.result);
            }
          });
        }
      },


      submitForm () {
        const that = this;
        // 触发表单验证
        this.form.validateFields((err, values) => {
          if (!err) {
            that.confirmLoading = true;
            let httpurl = '';
            let method = '';
            if(!this.model.id){
              httpurl+=this.url.add;
              method = 'post';
            }else{
              httpurl+=this.url.edit;
               method = 'put';
            }
            let formData = Object.assign(this.model, values);
            console.log("表单提交数据",formData)
            httpAction(httpurl,formData,method).then((res)=>{
              if(res.success){
                that.$message.success(res.message);
                that.$emit('ok');
              }else{
                that.$message.warning(res.message);
              }
            }).finally(() => {
              that.confirmLoading = false;
            })
          }

        })
      },
      popupCallback(row){
        this.form.setFieldsValue(pick(row,'wxAccountId','openid','unionid','nickname','sex','city','country','province','language','headimgurl','subscribeTime','subscribeScene','qrScene','qrSceneStr','subscribe','createTime','updateTime'))
      },
    }
  }
</script>

<script>

// import { httpAction, getAction } from '@api/manage'
// import pick from 'lodash.pick'
// import { validateDuplicateValue } from '@/utils/util'
// import JFormContainer from '@comp/jeecg/JFormContainer'
// import JDate from '@comp/jeecg/JDate'
// import JImageUpload from '@comp/jeecg/JImageUpload'
// import JDictSelectTag from "@comp/dict/JDictSelectTag"
// import JAreaLinkage from '@comp/jeecg/JAreaLinkage'
//
// export default {
//   name: 'PatientForm',
//   components: {
//     JFormContainer,
//     JDate,
//     JImageUpload,
//     JDictSelectTag,
//     JAreaLinkage,
//   },
//   props: {
//     //流程表单data
//     formData: {
//       type: Object,
//       default: ()=>{},
//       required: false
//     },
//     //表单模式：true流程表单 false普通表单
//     formBpm: {
//       type: Boolean,
//       default: false,
//       required: false
//     },
//     //表单禁用
//     disabled: {
//       type: Boolean,
//       default: false,
//       required: false
//     }
//   },
//   data () {
//     return {
//       form: this.$form.createForm(this),
//       model: {},
//       labelCol: {
//         xs: { span: 24 },
//         sm: { span: 5 },
//       },
//       wrapperCol: {
//         xs: { span: 24 },
//         sm: { span: 16 },
//       },
//       confirmLoading: false,
//       validatorRules: {
//         wxUserinfoId: {
//           rules: [
//             { required: true, message: '请输入关联微信用户id!'},
//           ]
//         },
//         name: {
//           rules: [
//             { required: true, message: '请输入患者姓名!'},
//           ]
//         },
//         headImg: {
//           rules: [
//             { required: true, message: '请输入患者头像!'},
//           ]
//         },
//         pyinShort: {
//           rules: [
//             { required: true, message: '请输入患者姓名拼音!'},
//           ]
//         },
//         firstChar: {
//           rules: [
//             { required: true, message: '请输入患者首字母!'},
//           ]
//         },
//         sex: {
//           rules: [
//             { required: true, message: '请输入性别 1男 2女 0未知!'},
//           ]
//         },
//         createTime: {
//           rules: [
//             { required: true, message: '请输入创建时间!'},
//           ]
//         },
//       },
//       url: {
//         add: "/patient/patient/add",
//         edit: "/patient/patient/edit",
//         queryById: "/patient/patient/queryById"
//       }
//     }
//   },
//   computed: {
//     formDisabled(){
//       if(this.formBpm===true){
//         if(this.formData.disabled===false){
//           return false
//         }
//         return true
//       }
//       return this.disabled
//     },
//     showFlowSubmitButton(){
//       if(this.formBpm===true){
//         if(this.formData.disabled===false){
//           return true
//         }
//       }
//       return false
//     }
//   },
//   created () {
//     //如果是流程中表单，则需要加载流程表单data
//     this.showFlowData();
//   },
//   methods: {
//     add () {
//       this.edit({});
//     },
//     edit (record) {
//       this.form.resetFields();
//       this.model = Object.assign({}, record);
//       this.visible = true;
//       this.$nextTick(() => {
//         this.form.setFieldsValue(pick(this.model,'wxUserinfoId','name','mobile','headImg','pyinShort','firstChar','relation','sex','birthday','height','weight','provinceId','cityId','history','allergy','createTime','updateTime'))
//       })
//     },
//     //渲染流程表单数据
//     showFlowData(){
//       if(this.formBpm === true){
//         let params = {id:this.formData.dataId};
//         getAction(this.url.queryById,params).then((res)=>{
//           if(res.success){
//             this.edit (res.result);
//           }
//         });
//       }
//     },
//     submitForm () {
//       const that = this;
//       // 触发表单验证
//       this.form.validateFields((err, values) => {
//         if (!err) {
//           that.confirmLoading = true;
//           let httpurl = '';
//           let method = '';
//           if(!this.model.id){
//             httpurl+=this.url.add;
//             method = 'post';
//           }else{
//             httpurl+=this.url.edit;
//             method = 'put';
//           }
//           let formData = Object.assign(this.model, values);
//           console.log("表单提交数据",formData)
//           httpAction(httpurl,formData,method).then((res)=>{
//             if(res.success){
//               that.$message.success(res.message);
//               that.$emit('ok');
//             }else{
//               that.$message.warning(res.message);
//             }
//           }).finally(() => {
//             that.confirmLoading = false;
//           })
//         }
//
//       })
//     },
//     popupCallback(row){
//       this.form.setFieldsValue(pick(row,'wxUserinfoId','name','mobile','headImg','pyinShort','firstChar','relation','sex','birthday','height','weight','provinceId','cityId','history','allergy','createTime','updateTime'))
//     },
//   }
// }
</script>


